<template>
  <xui-bottom-popup ref="popupRef">
    <view class="xui-picker__header">
      <view class="xui-picker__header__cancel" @click="cancel">取消</view>
      <view class="xui-picker__header__confirm" @click="confirm">确定</view>
    </view>

    <view class="xui-picker__body">
      <picker-view class="xui-picker-view" immediate-change :indicator-class="indicatorClass" :value="pickerIndexs"
        @change="pickerChange">
        <picker-view-column v-for="(column, index) in columns" :key="index">
          <view class="xui-picker-column-item" v-for="(item, i) in column" :key="i">{{ item.label }}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </xui-bottom-popup>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import { copy } from '../utils/index'

export default {
  name: 'XuiDatePicker',
  props: {
    /**
     * 选择数据
     * [
     *  [{ label, value }],
     *  ...
     * ]
     * @property {string|number} label - 标题
     * @property {string|number} value - 值
     */
    columns: Array,
    defaultValue: Array,
    indicatorClass: {
      type: String,
      default: 'indicator-class'
    }
  },
  setup (props, { emit }) {
    const pickerIndexs = reactive([]) // picker 索引值集合

    const popupRef = ref()
    const open = () => {
      popupRef.value.open()
    }
    const close = () => {
      popupRef.value.close()
      emit('close')
    }
    const cancel = () => {
      popupRef.value.close()
      emit('cancel')
    }
    const confirm = () => {
      setTimeout(() => {
        const indexs = pickerIndexs
        const values = props.columns.map((column, index) => column[indexs[index]])

        const result = { values, indexs }
        emit('confirm', copy(result))
      }, 80)
    }
    const pickerChange = ({ target }) => {
      pickerIndexs.length = 0
      target.value.forEach(el => pickerIndexs.push(el))
    }
    const valueToIndex = (value) => {
      value.forEach((columnValue, columnIndex) => {
        const column = props.columns[columnIndex]
        const index = column.findIndex(el => el.value === columnValue)

        pickerIndexs[columnIndex] = index > -1 ? index : 0
      })
    }

    watch(
      () => props.defaultValue,
      (defaultValue) => {
        valueToIndex(defaultValue)
      },
      { immediate: true }
    )

    watch(
      () => props.columns,
      () => {
        // console.log(columns)
        // columns.forEach((_, index) => {
        //   if ([undefined, null].includes(this.pickerIndexs[index])) {
        //     this.pickerIndexs[index] = 0
        //   }
        // })
        valueToIndex(props.defaultValue)
      },
      { immediate: true }
    )

    return {
      popupRef,
      open,
      close,
      cancel,
      confirm,
      pickerIndexs,
      pickerChange
    }
  }
}
</script>

<style lang="scss">
.indicator-class {
  height: 88rpx;
  background: #f5f5f5;
  z-index: -1;

  &::after,
  &::before {
    content: none;
  }
}
</style>
<style lang="scss" scoped>
.xui-picker__header {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  padding: 0 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 32rpx;
  position: relative;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
  background-color: #fff;

  &__cancel {
    color: #bbbbbb;
  }

  &__confirm {
    color: #51a3ff;
  }

  &::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #f9f9f9;
  }
}

.xui-picker__body {
  height: 520rpx;
  width: 100%;
  overflow: hidden;
  background-color: #fff;

  .xui-picker-view {
    height: 100%;
    box-sizing: border-box;

    .xui-picker-column-item {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #333;
    }
  }
}
</style>
